<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.css"/>
    <link rel="stylesheet" href="bootstrap-theme.css"/>
    <script src="jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body{font-size:12px;text-align:center;}
        #tbStu{width:260px;border:solid 1px #666;background-color:#eee;}
        #tbStu tr{line-height:23px;}
        #tbStu tr th{background-color:#ccc;color:#fff;}
    </style>
    <script type="text/javascript">
        $(function(){
            $("tr:not(:first)").each(function(i){
                this.style.fontSize=['13px','14px','15px'][i]
                this.style.backgroundColor=['#eee','#fff'][i%2]
            });
        });
    </script> 
    <title>collection</title>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>总分</th>
    </tr>
    <tr>
        <td>1001</td>
        <td>John</td>
        <td>man</td>
        <td>320</td>
    </tr>
    <tr>
        <td>1001</td>
        <td>John</td>
        <td>man</td>
        <td>320</td>
    </tr>
    <tr>
        <td>1001</td>
        <td>John</td>
        <td>man</td>
        <td>320</td>
    </tr>
    <tr>
        <td>1001</td>
        <td>John</td>
        <td>man</td>
        <td>320</td>
    </tr>
    </tbody>
</table>
</body>
</html>